<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Shine</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimal-ui">
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
	<nav class="navbar fixed-top justify-content-start m-lg-4">
		<a href="#home" data-scroll-to="home" class="navbar-brand dark-white m-0 p-2 r-l">
			<svg width="24" height="24" viewBox="0 0 107 146" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g fill-rule="nonzero"><path d="M40,68.1 C29.4,56.4 18.7,61.5 6.9,71.6 C5.6,72.7 3.7,71.4 4.3,69.8 C11.7,48.4 27.5,44.5 40.9,52.5 L40.8,55.7 L40,68.1 Z" id="Shape" fill="#4988FD"></path><path d="M106.6,94.5 C106.6,96 104.5,96.4 103.8,95.1 C96.3,78.7 81.6,66.4 71.2,68.7 C71.2,68.7 71.2,68.7 71.2,68.7 L71.4,53.1 C81.7,53.1 107.7,59.3 106.6,94.5 Z" id="Shape" fill="#4988FD"></path><path d="M70.5,76.4 C66.2,97.2 56,125.1 30.9,126.4 C14.8,127.2 22.8,125.2 0.8,145.3 C0.8,145.3 3.2,129.8 3.2,129.8 C3.4,128.8 8.2,126.6 9.2,126 C12.9,123.5 15.5,120 18.5,116.7 C26.2,108.3 32.9,95.4 36.4,81.4 C47.1,38.4 35,25.6 31.1,13.7 C29.7,9.5 30.2,4.7 34.3,2.2 C45.3,-4.4 55.7,13 60.4,20.4 C71.6,38 74.5,57.2 70.5,76.4 Z" id="Shape" fill="#D5E6FD"></path><path d="M49.4,48 C48.5,48 47.7,47.4 47.5,46.5 C47.3,45.7 47.1,44.8 46.9,44 C46.6,42.9 47.2,41.8 48.3,41.5 C49.4,41.2 50.5,41.8 50.8,42.9 C51.1,43.8 51.3,44.7 51.5,45.6 C51.8,46.7 51.1,47.8 50,48 C49.7,48 49.6,48 49.4,48 Z" id="Shape" fill="#BAD8FF"></path><path d="M48.7,73.5 C48.6,73.5 48.4,73.5 48.3,73.5 C47.2,73.3 46.5,72.2 46.8,71.1 C48.3,64.1 49.1,59 48.6,53.4 C48.5,52.3 49.3,51.3 50.4,51.2 C51.5,51.1 52.5,51.9 52.6,53 C53.1,59.1 52.3,64.5 50.7,71.9 C50.5,72.8 49.6,73.5 48.7,73.5 Z" id="Shape" fill="#BAD8FF"></path><path d="M71.7,68.6 C71.4,71.2 71,73.8 70.4,76.5 C66.1,97.3 55.9,125.2 30.8,126.5 C14.7,127.3 22.7,125.3 0.7,145.4 L3,129.9 C3.2,128.9 8,126.7 9,126.1 C12.7,123.6 15.3,120.1 18.3,116.8 C26,108.4 32.7,95.5 36.2,81.5 C37.5,76.3 38.5,71.6 39.1,67.2 L39.1,67 C42,69 45.2,70.6 48.6,71.5 C56.2,73.6 64.4,72.3 71.5,68.7 C71.6,68.6 71.7,68.6 71.7,68.6 Z" id="Shape" fill="#4278F4"></path><path d="M71.6,68.6 C70.3,77.6 66.6,84 59.1,94.8 C48.3,110.1 36.1,110.6 39.5,98.4 C42.8,86.5 39.6,76.3 39.2,67.2 L39.2,67 C42.1,69 45.3,70.6 48.7,71.5 C56.3,73.5 64.5,72.3 71.6,68.6 Z" id="Shape" fill="#6097FD"></path><path d="M51.7,26.4 C51,26.4 50.3,26 50,25.4 C48.9,23.5 47.8,21.7 46.6,20 C46,19.1 46.2,17.8 47.1,17.2 C48,16.6 49.3,16.8 49.9,17.7 C51.2,19.5 52.4,21.4 53.5,23.4 C54,24.4 53.7,25.6 52.7,26.1 C52.4,26.3 52.1,26.4 51.7,26.4 Z" id="Shape" fill="#BAD8FF"></path><path d="M58.7,43.2 C57.8,43.2 57,42.6 56.8,41.7 C55.7,37.8 54.3,33.9 52.6,30.4 C52.1,29.4 52.6,28.2 53.6,27.7 C54.6,27.2 55.8,27.7 56.3,28.7 C58,32.5 59.5,36.5 60.7,40.6 C61,41.7 60.4,42.8 59.3,43.1 C59.1,43.2 58.9,43.2 58.7,43.2 Z" id="Shape" fill="#BAD8FF"></path><path d="M60.1,49.1 C59.2,49.1 58.4,48.5 58.1,47.5 L58.1,47.3 C57.9,46.2 58.6,45.2 59.7,44.9 C60.8,44.7 61.8,45.4 62.1,46.5 L62.1,46.6 C62.3,47.7 61.7,48.7 60.6,49 C60.4,49.1 60.3,49.1 60.1,49.1 Z" id="Shape" fill="#BAD8FF"></path></g></g></svg>
			<span class="hidden-folded d-inline">Shine</span>
		</a>
		<ul class="nav white flex-row px-3 r-r">
			<li class="nav-item"><a class="nav-link px-2" href="#demos" data-scroll-to="demos"><span>演示</span></a></li>
			<li class="nav-item"><a class="nav-link px-2" href="#features" data-scroll-to="features"><span>特征</span></a></li>
			<li class="nav-item"><a class="nav-link px-2" href="http://wpa.qq.com/msgrd?v=3&uin=877085893&site=qq&menu=yes" target="_blank"><span class="text-primary">购买</span></a></li>
		</ul>
	</nav>
</header>

<div id="home">
	<div class="row no-gutters">
		<div class="col-md-6 h-v white d-flex">
			<div class="p-5 flex align-self-center">
				<h3 class="_700 l-s-n-1x my-5">令人惊叹的昼夜双版设计，经典独特的博客与杂志混合设计</h3>
				<h5 class="text-muted mb-5 text-serif">专属 Emlog6.0 你下一个更完美的主题，只为让您的站点拥有速度与优雅兼具的极致体验。</h5>
				<a href="#demos" data-scroll-to="demos" class="btn btn-lg btn-outline b-primary text-primary b-2x">查看效果图</a>
				<div class="row mt-3">
					<div class="col-md-4">
						<div class="box list-item r-2x blue">
							<span class="avatar w-40 text-center circle theme"><span class="fas fa-funnel-dollar"></span></span>
							<div class="list-body">
								<h4 class="m-0 text-md">￥599</h4>
								<small class="text-muted">统一零售价</small>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-6 d-flex py-5 align-items-center justify-content-center progress-bar-animated progress-bar-striped" style="background-color: #dbe2ec">
			<div class="p-5">
				<svg width="156" height="156" viewBox="0 0 107 146" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g fill-rule="nonzero"><path d="M40,68.1 C29.4,56.4 18.7,61.5 6.9,71.6 C5.6,72.7 3.7,71.4 4.3,69.8 C11.7,48.4 27.5,44.5 40.9,52.5 L40.8,55.7 L40,68.1 Z" id="Shape" fill="#4988FD"></path><path d="M106.6,94.5 C106.6,96 104.5,96.4 103.8,95.1 C96.3,78.7 81.6,66.4 71.2,68.7 C71.2,68.7 71.2,68.7 71.2,68.7 L71.4,53.1 C81.7,53.1 107.7,59.3 106.6,94.5 Z" id="Shape" fill="#4988FD"></path><path d="M70.5,76.4 C66.2,97.2 56,125.1 30.9,126.4 C14.8,127.2 22.8,125.2 0.8,145.3 C0.8,145.3 3.2,129.8 3.2,129.8 C3.4,128.8 8.2,126.6 9.2,126 C12.9,123.5 15.5,120 18.5,116.7 C26.2,108.3 32.9,95.4 36.4,81.4 C47.1,38.4 35,25.6 31.1,13.7 C29.7,9.5 30.2,4.7 34.3,2.2 C45.3,-4.4 55.7,13 60.4,20.4 C71.6,38 74.5,57.2 70.5,76.4 Z" id="Shape" fill="#D5E6FD"></path><path d="M49.4,48 C48.5,48 47.7,47.4 47.5,46.5 C47.3,45.7 47.1,44.8 46.9,44 C46.6,42.9 47.2,41.8 48.3,41.5 C49.4,41.2 50.5,41.8 50.8,42.9 C51.1,43.8 51.3,44.7 51.5,45.6 C51.8,46.7 51.1,47.8 50,48 C49.7,48 49.6,48 49.4,48 Z" id="Shape" fill="#BAD8FF"></path><path d="M48.7,73.5 C48.6,73.5 48.4,73.5 48.3,73.5 C47.2,73.3 46.5,72.2 46.8,71.1 C48.3,64.1 49.1,59 48.6,53.4 C48.5,52.3 49.3,51.3 50.4,51.2 C51.5,51.1 52.5,51.9 52.6,53 C53.1,59.1 52.3,64.5 50.7,71.9 C50.5,72.8 49.6,73.5 48.7,73.5 Z" id="Shape" fill="#BAD8FF"></path><path d="M71.7,68.6 C71.4,71.2 71,73.8 70.4,76.5 C66.1,97.3 55.9,125.2 30.8,126.5 C14.7,127.3 22.7,125.3 0.7,145.4 L3,129.9 C3.2,128.9 8,126.7 9,126.1 C12.7,123.6 15.3,120.1 18.3,116.8 C26,108.4 32.7,95.5 36.2,81.5 C37.5,76.3 38.5,71.6 39.1,67.2 L39.1,67 C42,69 45.2,70.6 48.6,71.5 C56.2,73.6 64.4,72.3 71.5,68.7 C71.6,68.6 71.7,68.6 71.7,68.6 Z" id="Shape" fill="#4278F4"></path><path d="M71.6,68.6 C70.3,77.6 66.6,84 59.1,94.8 C48.3,110.1 36.1,110.6 39.5,98.4 C42.8,86.5 39.6,76.3 39.2,67.2 L39.2,67 C42.1,69 45.3,70.6 48.7,71.5 C56.3,73.5 64.5,72.3 71.6,68.6 Z" id="Shape" fill="#6097FD"></path><path d="M51.7,26.4 C51,26.4 50.3,26 50,25.4 C48.9,23.5 47.8,21.7 46.6,20 C46,19.1 46.2,17.8 47.1,17.2 C48,16.6 49.3,16.8 49.9,17.7 C51.2,19.5 52.4,21.4 53.5,23.4 C54,24.4 53.7,25.6 52.7,26.1 C52.4,26.3 52.1,26.4 51.7,26.4 Z" id="Shape" fill="#BAD8FF"></path><path d="M58.7,43.2 C57.8,43.2 57,42.6 56.8,41.7 C55.7,37.8 54.3,33.9 52.6,30.4 C52.1,29.4 52.6,28.2 53.6,27.7 C54.6,27.2 55.8,27.7 56.3,28.7 C58,32.5 59.5,36.5 60.7,40.6 C61,41.7 60.4,42.8 59.3,43.1 C59.1,43.2 58.9,43.2 58.7,43.2 Z" id="Shape" fill="#BAD8FF"></path><path d="M60.1,49.1 C59.2,49.1 58.4,48.5 58.1,47.5 L58.1,47.3 C57.9,46.2 58.6,45.2 59.7,44.9 C60.8,44.7 61.8,45.4 62.1,46.5 L62.1,46.6 C62.3,47.7 61.7,48.7 60.6,49 C60.4,49.1 60.3,49.1 60.1,49.1 Z" id="Shape" fill="#BAD8FF"></path></g></g></svg>
			</div>
		</div>
	</div>
</div>

<div class="p-5" id="demos">
	<div class="box-radius-2 box-shadow-4 no-shadow py-5">
		<div class="row py-5">
			<div class="col-12 col-lg-8 col-xl-6">
				<h4 class="_700 l-s-1x mb-5">
					<span class="text-primary mr-2">One</span><span class="text-muted">主题在手</span>
					<br/>
					<br/>
					<span class="text-muted">多模式随意切换多布局风格</span>
				</h4>
				<h5 class="text-muted mb-3 mb-lg-0 text-serif">感谢瑾忆测试</h5>
			</div>
			<div class="col-6 col-lg-4 col-xl-3">
				<div class="box browser">
					<div class="item">
						<div class="item-media item-media-16by9 light">
							<a class="item-media-content fancybox-button" href="img/home.png" title="默认" style="background-image:url(img/home.png)"></a>
						</div>
					</div>
					<div class="box-body">
						<a href="#" class="p-a d-block text-center h6 m-0">默认</a>
					</div>
				</div>
			</div>
			<div class="col-6 col-lg-4 col-xl-3">
				<div class="box browser">
					<div class="item">
						<div class="item-media item-media-16by9 light">
							<a class="item-media-content fancybox-button" href="img/home-dark.png" title="夜间" style="background-image:url(img/home-dark.png)"></a>
						</div>
					</div>
					<div class="box-body">
						<a href="#" class="p-a d-block text-center h6 m-0">夜间</a>
					</div>
				</div>
			</div>
			<div class="col-6 col-lg-4 col-xl-3 d-none d-xl-flex text-muted">
				<span class="display-1 text-muted l-h-1x">10+</span>
			</div>
			<div class="col-6 col-lg-4 col-xl-3">
				<div class="box browser">
					<div class="item">
						<div class="item-media item-media-16by9 light">
							<a class="item-media-content fancybox-button" href="img/tuisong.1.png" title="推送~1" style="background-image:url(img/tuisong.1.png)"></a>
						</div>
					</div>
					<div class="box-body">
						<a href="#" class="p-a d-block text-center h6 m-0">推送~1</a>
					</div>
				</div>
			</div>
			<div class="col-6 col-lg-4 col-xl-3">
				<div class="box browser">
					<div class="item">
						<div class="item-media item-media-16by9 light">
							<a class="item-media-content fancybox-button" href="img/tuisong.2.png" title="推送~2" style="background-image:url(img/tuisong.2.png)"></a>
						</div>
					</div>
					<div class="box-body">
						<a href="#" class="p-a d-block text-center h6 m-0">推送~2</a>
					</div>
				</div>
			</div>
			<div class="col-6 col-lg-4 col-xl-3">
				<div class="box browser">
					<div class="item">
						<div class="item-media item-media-16by9 light">
							<a class="item-media-content fancybox-button" href="img/tuisong.3.png" title="推送~3" style="background-image:url(img/tuisong.3.png)"></a>
						</div>
					</div>
					<div class="box-body">
						<a href="#" class="p-a d-block text-center h6 m-0">推送~3</a>
					</div>
				</div>
			</div>
			<div class="col-6 col-lg-4 col-xl-3">
				<div class="box browser">
					<div class="item">
						<div class="item-media item-media-16by9 light">
							<a class="item-media-content fancybox-button" href="img/blog.1.png" title="Blog~1" style="background-image:url(img/blog.1.png)"></a>
						</div>
					</div>
					<div class="box-body">
						<a href="#" class="p-a d-block text-center h6 m-0">Blog~1</a>
					</div>
				</div>
			</div>
			<div class="col-6 col-lg-4 col-xl-3">
				<div class="box browser">
					<div class="item">
						<div class="item-media item-media-16by9 light">
							<a class="item-media-content fancybox-button" href="img/blog.2.png" title="Blog~2" style="background-image:url(img/blog.2.png)"></a>
						</div>
					</div>
					<div class="box-body">
						<a href="#" class="p-a d-block text-center h6 m-0">Blog~2</a>
					</div>
				</div>
			</div>
			<div class="col-6 col-lg-4 col-xl-3">
				<div class="box browser">
					<div class="item">
						<div class="item-media item-media-16by9 light">
							<a class="item-media-content fancybox-button" href="img/magazine.1.png" title="杂志~1" style="background-image:url(img/magazine.1.png)"></a>
						</div>
					</div>
					<div class="box-body">
						<a href="#" class="p-a d-block text-center h6 m-0">杂志~1</a>
					</div>
				</div>
			</div>
			<div class="col-6 col-lg-4 col-xl-3">
				<div class="box browser">
					<div class="item">
						<div class="item-media item-media-16by9 light">
							<a class="item-media-content fancybox-button" href="img/magazine.2.png" title="杂志~2" style="background-image:url(img/magazine.2.png)"></a>
						</div>
					</div>
					<div class="box-body">
						<a href="#" class="p-a d-block text-center h6 m-0">杂志~2</a>
					</div>
				</div>
			</div>
			<div class="col-6 col-lg-4 col-xl-3">
				<div class="box browser">
					<div class="item">
						<div class="item-media item-media-16by9 light">
							<a class="item-media-content fancybox-button" href="img/magazine.2.png" title="杂志~3" style="background-image:url(img/magazine.3.png)"></a>
						</div>
					</div>
					<div class="box-body">
						<a href="#" class="p-a d-block text-center h6 m-0">杂志~3</a>
					</div>
				</div>
			</div>
			<div class="col-6 col-lg-4 col-xl-3">
				<div class="box browser">
					<div class="item">
						<div class="item-media item-media-16by9 light">
							<a class="item-media-content fancybox-button" href="img/magazine.4.png" title="杂志~4" style="background-image:url(img/magazine.4.png)"></a>
						</div>
					</div>
					<div class="box-body">
						<a href="#" class="p-a d-block text-center h6 m-0">杂志~4</a>
					</div>
				</div>
			</div>
			<div class="col-6 col-lg-4 col-xl-3">
				<div class="box browser">
					<div class="item">
						<div class="item-media item-media-16by9 light">
							<a class="item-media-content fancybox-button" href="img/reader.png" title="优秀读者墙" style="background-image:url(img/reader.png)"></a>
						</div>
					</div>
					<div class="box-body">
						<a href="#" class="p-a d-block text-center h6 m-0">优秀读者墙</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="p-5 dark-white" id="features">
	<div class="p-lg-5">
		<h4 class="display-4 _700 l-s-n-1x my-5">
			<span class="text-primary mr-2">One</span>
			<span class="text-muted mr-3">More</span>
			<span class="text-muted"><span class="text-muted">Thing</span></span>
		</h4>
		<h5 class="text-muted mb-5 text-serif">独特的功能让你网站大放光彩</h5>
		<div class="row">
			<div class="col-6 col-md-4 my-4">
				<h6 class="_600 my-2">多设备支持</h6>
				<p class="text-muted">自适应布局，支持电脑、Pad、手机以及各种浏览器 </p>
			</div>
			<div class="col-6 col-md-4 my-4">
				<span class="text-primary"><i class="ion-logo-sass text-3x"></i></span>
				<h6 class="_600 my-2">首页轮换图</h6>
				<p class="text-muted">获取最新热门的文章首推送用户，多风格布局</p>
			</div>
			<div class="col-6 col-md-4 my-4">
				<span class="text-primary"><i class="ion-logo-nodejs text-3x"></i></span>
				<h6 class="_600 my-2">首页博客与杂志风自由切换</h6>
				<p class="text-muted">首页根据自己的爱好随意搭配博客风格与杂志风格，多功能的模块布局随心配 </p>
			</div>
			<div class="col-6 col-md-4 my-4">
				<span class="text-primary"><i class="ion-ios-browsers-outline text-3x"></i></span>
				<h6 class="_600 my-2">6+独立页面</h6>
				<p class="text-muted">读者墙、友情链接、存档页、标签云、无边栏页、有侧栏页</p>
			</div>
			<div class="col-6 col-md-4 my-4">
				<h6 class="_600 my-2">十多个小工具，用不用，反正够用</h6>
				<p class="text-muted">重新设计优化十余种默认小工具。又新增广告、文章（按评论、浏览、点赞等排序）小工具。</p>
			</div>
			<div class="col-6 col-md-4 my-4">
				<h6 class="_600 my-2">自定义网站社交平台链接展示</h6>
				<p class="text-muted">文章以及网站页脚上，可自定义显示社交平台的链接。</p>
			</div>
			<div class="col-6 col-md-4 my-4">
				<span class="text-primary"><i class="ion-ios-paper-outline text-3x"></i></span>
				<h6 class="_600 my-2">智能的裁剪文章缩略图</h6>
				<p class="text-muted">采用timthumb裁剪文章缩略图，裁剪最合适的图片大小，智能居中，支持WP特色缩略图。</p>
			</div>
			<div class="col-6 col-md-4 my-4">
				<span class="text-primary"><i class="ion-ios-desktop-outline text-3x"></i></span>
				<h6 class="_600 my-2">强大的自定义代码</h6>
				<p class="text-muted">可自定义公共头部代码、公共底部代码</p>
			</div>
			<div class="col-6 col-md-4 my-4">
				<span class="text-primary"><i class="ion-ios-pie-outline text-3x"></i></span>
				<h6 class="_600 my-2">专业的主题文档</h6>
				<p class="text-muted">就算对建站毫无经验的小伙伴也不用怕，按我们提供的文档一步一步做，即可快速搭建和样板图一样的效果。</p>
			</div>
		</div>
	</div>
</div>

<footer class="dark pos-rlt">
	<div class="footer dk">
		<div class="text-center p-5">
			<div class="clearfix text-lg">
				<strong>Shine</strong> 是你 <code>Emlog 6.0</code> 下一个主题
			</div>
			<div class="nav justify-content-center my-2 text-primary">
				<a class="nav-link" href="#demos" data-scroll-to="demos"><span class="nav-text">演示</span></a>
				<a class="nav-link" href="#features" data-scroll-to="features"><span class="nav-text">特征</span></a>
				<a class="nav-link" href="https://github.com/theme-document/shine/wiki" target="_blank"><span class="nav-text">文档</span></a>
				<a class="nav-link" href="http://wpa.qq.com/msgrd?v=3&uin=877085893&site=qq&menu=yes" target="_blank"><span class="nav-text">购买</span></a>
			</div>
		</div>
		<div class="b b-b"></div>
		<div class="p-5">
			<div class="row footer-bottom">
				<div class="col-sm-8">
					<small class="text-muted">&copy; 2020 MrTang.</small>
				</div>
				<div class="col-sm-4">
					<div class="text-sm-right text-xs-left">
						<strong>Shine</strong>
					</div>
				</div>
			</div>
		</div>
	</div>
</footer>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<script>

$.extend(jQuery.easing,{
	def: "easeOutQuad",
	easeInOutExpo: function(e, t, n, i, r) {
		return 0 == t ? n : t == r ? n + i : (t /= r / 2) < 1 ? i / 2 * Math.pow(2, 10 * (t - 1)) + n : i / 2 * (2 - Math.pow(2, -10 * --t)) + n
	}
});

$(document).ready(function() {
	$(".fancybox-button").fancybox({
		prevEffect		: 'none',
		nextEffect		: 'none',
		closeBtn		: false,
		helpers		: {
			title	: { type : 'inside' },
			buttons	: {}
		}
	});
});

$(document).on("click", "[data-scroll-to]", function(t){
	t.preventDefault();
	var n = $($(this).attr("href")) || $("#" + $(this).attr("data-scroll-to"));
	
	n && $("html,body").animate({
		scrollTop: n.offset().top
	}, 600, "easeInOutExpo");
});
</script>
</body>
</html>